<template>
    <div class="dingdan-root">
        <header>
            <div class="hunter-img"><img :src="proInfo.lunbo[0].img"></div>
            <div class="mask"></div>
            <p>{{proInfo.title}}</p>
        </header>
        <div class="box">
            <div class="price-type">
                <h3>价格分类</h3>
                <ul>
                    <li 
                        v-for="(t,i) in proInfo.price.type"
                        :class='{clickhigh:isActive==i}'
                        @click="changeIsactive(i)"
                    >
                        <p>{{t.type}}</p>
                    </li>
                </ul>
            </div>
            <div class="date">
                <group class="cal">
                    <calendar title="体验日期" v-model="dingdanInfo.selectDate"  @on-change="calChange" disable-past></calendar>
                </group>
                <span class="fa fa-chevron-right dir"></span>
            </div>
            <div class="num">
                <h3>预约数量</h3>
                <div>
                    <span 
                        class="yuan" 
                        @click="changeNum(1)"
                        :class="{disable:isOne}"
                    >-</span>
                    <span class="shuzi">{{dingdanInfo.num}}</span>
                    <span class="yuan" @click="changeNum(2)">+</span>
                </div>
            </div>
            <div class="order-info">
                <h3>联系人信息</h3>
                <div>
                    <label for="">姓名</label>
                    <input v-model="dingdanInfo.username" type="text" placeholder="您的姓名">
                </div>
                <div>
                    <label for="">+86&ensp;&ensp;></label>
                    <input v-model="dingdanInfo.tel" type="text" placeholder="接收预约信息的手机号">
                </div>
            </div>
            <div class="xieyi">
                <p>
                    <input type="checkbox">
                    <span>接受本产品的<a href="">预订协议</a></span>
                </p>
            </div>
        </div>
        <div class="footer">
            <div class="footer-left">
                <div class="shifu">
                    <span class="xiao">实付</span>
                    <span class="qian">￥</span>
                    <span class="qian-range">{{dingdanInfo.price}}</span>
                </div>
                <div class="mingxi" @click="changeOpen">
                    <span>明细</span>
                    <span>
                        <span 
                            v-show="isOpen" 
                            class="fa fa-caret-up">
                        </span>
                        <span 
                            v-show="!isOpen" 
                            class="fa fa-caret-down">
                        </span>
                    </span>
                </div>
            </div>
            <a 
                @touchstart="tjyy"
                class="footer-right"
            >提交预约</a>
        </div>
        <div class="allmask" v-show="!isOpen" @click="closeMask"></div>
        <div class="mx" :class="{heizero:isOpen}">
            <span>订单总价</span>
            <span>{{dingdanInfo.price}}元</span>
        </div>
        <Alert v-show="isAlert">您还未登录哦</Alert>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    import {
        Calendar
    } from 'vux';
    export default {
        components: {
            Calendar,
        },
        data: function() {
            return {
                isOne:true,
                isActive:0,
                isOpen:true,
            }
        },
        mounted: function() {
            if(this.$route.query){
                this.isActive = this.$route.query.is;
            }
            if(this.$route.params.isActive==0){
                this.isActive = 0;
            }
            this.dingdanInfo.price = this.proInfo.price.type[this.isActive].price;
        },
        computed: {
            ...mapState([
                "proInfo",
                "isActive",
                "dingdanInfo",
                "isAlert",
            ])
        },
        methods: {
            calChange: function(date) {
                this.dingdanInfo.selectDate = date;
                this.$store.commit("setdingdanInfo", this.dingdanInfo);
            },
            changeNum:function(n){
                if(n==1){
                    if(this.dingdanInfo.num>1)
                    this.dingdanInfo.num--;
                }
                if(n==2){
                    this.dingdanInfo.num++;
                }
                if(this.dingdanInfo.num<=1){
                    this.isOne =true;
                }else{
                    this.isOne = false;
                }
                this.$store.commit("setdingdanInfo", this.dingdanInfo);
            },
            changeIsactive:function(n){
                this.isActive = n;
                this.dingdanInfo.price = this.proInfo.price.type[n].price;
                this.$store.commit("setdingdanInfo", this.dingdanInfo);
            },
            changeOpen:function(){
                this.isOpen = !this.isOpen;
            },
            closeMask:function(){
                this.isOpen = true;
            },
            tjyy:function(){
                if(localStorage.getItem("userInfo")){
                    localStorage.setItem("clickhm",new Date().getTime());
                    this.dingdanInfo.nowTime = new Date().getTime();
                    this.dingdanInfo.title = this.proInfo.title;
                    this.dingdanInfo.address = this.proInfo.place.title.substr(5);
                    this.dingdanInfo.img = this.proInfo.lunbo[0].img;

                    this.$store.dispatch("requestOrder",this.dingdanInfo)
                    .then(res=>{
                        location.href = "#/hunter/dingdan/submit?clickTime="+this.dingdanInfo.nowTime+'.0';
                    });
                   
                }else{
                    this.$store.commit("setIsAlert",true);
                    setTimeout(()=> {
                        this.$store.commit("setIsAlert",false);

                        location.href = "#/hunter/login";
                    }, 1800);
                }
            }
        }
    }
</script>

<style scoped>
    .dingdan-root {
        width: 100vw;
        height: calc(100vh - 57px);
        overflow: scroll;
        background-color: #fff;
    }
    .allmask{
        position: fixed;
        top:0;
        left:0;
        width:100vw;
        height: calc(100vh - 57px);
        z-index: 20;
        background: rgba(0, 0, 0, .5);
    }
    .mx{
        width: 100vw;
        height: 58px;
        position: fixed;
        bottom: 57px;
        left:0;
        background-color: #fff;
        padding:0 4vw;
        display: flex;
        justify-content: space-between;
        line-height: 57px;
        font-size: 0.9rem;
        color: #999;
        transition: height 0.4s;
        transform-origin: 50% 100%;
        z-index: 50;
    }
    .heizero{
        height: 0;
        overflow: hidden;
    }
    .footer{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100vw;
        height: 57px;
        background-color: #f47517;
        display: flex;
        z-index: 100;
    }
    .footer-left{
        width: 69vw;
        color: #fff;
        display: flex;
        padding: 0 3vw;
        justify-content: space-between;
        line-height: 57px;
    }
    .xiao{
        font-size: 0.8rem;
    }
    .qian {
        font-size: 14px;
        position: relative;
        top: -2.5vw;
        left: 1.5vw;
    }
    .qian-range {
        font-size: 20px;
        font-weight: 550;
    }
    .footer-right{
        background-color: #f36700;
        flex-grow: 1;
        color: #fff;
        text-align: center;
        line-height: 57px;
        font-size: 1.1rem;
    }
    .xieyi{
        text-align: center;
        margin: 16vw 0;
        margin-bottom: 24vw;
        color: #999;
        font-size: 0.9rem;
    }
    .xieyi a{
        text-decoration: underline;
    }
    .order-info>div{
        margin-top: 8vw;
        color: #5c5c5c;
        font-size: 0.9rem;
    }
    .order-info label{
        display: inline-block;
        width: 22vw;
    }
    .order-info input{
        border:none;
        color: #5c5c5c;
    }
    .box {
        padding-left: 4vw;
    }
    
    .hunter-img {
        position: relative;
        width: 100vw;
        height: 14vh;
        overflow: hidden;
    }
    
    .hunter-img img {
        width: 100vw;
        position: absolute;
        top: -11vh;
    }
    
    .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 14vh;
        background: rgba(0, 0, 0, .5);
    }
    header{
        position: relative;
    }
    header p {
        color: #fff;
        margin: 0;
        position: absolute;
        top: 7vh;
        left: 20vw;
        transform: translateY(-50%);
    }
    
    h3 {
        font-size: 0.93rem;
        color: #5c5c5c;
        font-weight: 600;
    }
    
    .price-type ul {
        padding: 0;
        margin-top: 0;
    }
    
    li {
        padding: 0 3vw;
        margin-bottom: 3vw;
        border: 1px solid #ddd;
        display: inline-block;
        width: 45vw;
        height: 21vw;
        margin-right: 2vw;
        list-style: none;
        text-align: center;
        color: #999;
        border-radius: 3px;
        vertical-align: top;
    }
    
    .clickhigh {
        background-color: #f36700;
        border: none;
        color: #fff;
    }
    
    .price-type li p {
        position: relative;
        top: 50%;
        /*height:42px;*/
        transform: translateY(-50%);
        margin: 0;
        font-size: 0.9rem;
    }
    
    .date {
        position: relative;
    }
    
    .dir {
        position: absolute;
        top: 50%;
        right: 3vw;
        transform: translateY(-50%);
        color: #999;
    }
    
    .num h3 {
        margin: 0;
    }
    
    .num {
        margin: 5vw;
        margin-bottom: 10vw;
        margin-left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .yuan {
        display: inline-block;
        text-align: center;
        font-size: 1.5rem;
        line-height: 7vw;
        width: 9vw;
        height: 9vw;
        border-radius: 50%;
        /*border: 1px solid #ccc;*/
        background-color: #f36700;
        color: #fff;
        font-weight: 100;
    }
    
    .shuzi {
        color: #333;
        margin: 0 3vw;
        font-weight: 600;
    }
    
    .disable {
        border: 1px solid #eee;
        color: #eee;
        background-color: #fff;
    }
</style>
<style>
    .weui-cell {
        padding-left: 0 !important;
        padding-top: 0 !important;
    }
    
    .vux-label {
        font-size: 0.93rem !important;
        color: #5c5c5c !important;
        font-weight: 600 !important;
    }
    
    .weui-cell__ft {
        font-weight: 600 !important;
        color: #5c5c5c !important;
        text-align: center !important;
    }
</style>